<template>
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="工作流名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="工作流参数">
        <el  v-model="form.params" />
        <!-- 动态参数输入区域 -->
        <div v-for="(i, index) in list" :key="index">
          <div v-for="j in i" :key="j.name">
            <!-- 渲染工作流名称输入框 -->
            <el-input v-if="j.name === 'title'" v-model="values[index]" placeholder="工作流名称" />
            <!-- 渲染工作流类型输入框 -->
            <el-input v-if="j.name === 'type'" v-model="typevalues[index]" placeholder="工作流类型" />
          </div>
        </div>
   
        <!-- 添加按钮，用于添加新的工作流参数 -->
        <el-button @click="add">+</el-button>
      </el-form-item>
      <el-form-item label="是否可用">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">可用</el-radio>
          <el-radio :label="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';



// 获取当前路由对象
const route = useRoute();
// 定义响应式变量
const values = ref([]); // 存储工作流名称
const typevalues = ref([]); // 存储工作流类型
const vvalues = ref([]); // 存储工作流参数
const list = ref([[{ name: "title" }, { name: "type" }]]); // 初始化list，包含工作流名称和类型
const number = ref(1); // 计数器

// 添加新的工作流参数项
const add = () => {
  number.value++;
  list.value.push([{ name: "title" }, { name: "type" }]);
  values.value.push(''); // 初始化工作流名称
  typevalues.value.push(''); // 初始化工作流类型
};

let form = ref({
  name: '',
  params: '',
  status: ''
});

// 提交表单数据
const onSubmit = () => {
  const valueslist = []; // 用于存储提交的数据
  for (let i = 0; i < number.value; i++) {
    valueslist.push({
      title: values.value[i], // 工作流名称
      type: typevalues.value[i], // 工作流类型
      // value: '' // 这里需要根据实际情况填充值
    });
  }
  form.value.params = JSON.stringify(valueslist); // 将valueslist转换为JSON字符串并赋值给form.params
  const data = {
    wid: route.query.id, // 从路由中获取wid
    ...form.value // 将form对象作为数据提交
  };

  // 发送POST请求到后端
  axios.post('http://127.0.0.1:8000/user/workflow/', data)
    .then(function(response){
      console.log(response);
      form.value={
        name: '',
        params: '',
        status: ''
      }

    })
    .catch(function(error){
      console.error("请求失败：", error);
    });
};
</script>

<style scoped> 

</style>